<script language="JavaScript">
function contar() {
  n = document.getElementById("createPostingForm:description").value.length;
  if (n > 20000) {
    document.getElementById("createPostingForm:description").value = document.getElementById("createPostingForm:description").value.substring(0, 20000);
  }
  else {
    document.getElementById("createPostingForm:contador").value = 20000-n;
  }
}
</script>
<f:view>
    <h:form>
        <h:panelGrid columns="3" >
            <h:outputText value="Create Job Posting in #{sessionBean.ejbSession.currentSite.site}" style="font-size: 20px; font-weight: bold;"/>
            <rich:toolBar id="toolBarUser" itemSeparator="line" width="200" style="right:5px; top:5px; position:absolute;">
                <a4j:region id="ajaxOpen" rendered="#{sessionBean.ejbSession.owner==null}">
                    <a4j:commandLink value="Log in to your account" onclick="Richfaces.showModalPanel('loginPanel');" focus="loginEmail" ajaxSingle="true" />
                </a4j:region>
                <h:outputLink value="/site/faces/signUp.jsp" target="_blank" rendered="#{sessionBean.ejbSession.owner==null}">
                    <h:outputText value="Sign Up"></h:outputText>
                </h:outputLink>
                <h:panelGroup rendered="#{sessionBean.ejbSession.owner!=null}">
                    <h:outputText value="Logged in as " />
                    <h:commandLink value="#{sessionBean.ejbSession.owner.email}" action="#{jobBean.homeUser}" />
                </h:panelGroup>
                <a4j:region id="ajaxLogout" rendered="#{sessionBean.ejbSession.owner!=null}">
                    <a4j:commandLink value="Log out" action="#{loginBean.logout}" reRender="toolBarUser,inputEmail,backForm" >
                        <f:setPropertyActionListener target="#{jobBean.back}" value="#{0}"/>
                    </a4j:commandLink>
                </a4j:region>
            </rich:toolBar>
            <a4j:status for="ajaxLogout" >
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
        </h:panelGrid>
    </h:form>
    <a4j:region>
    <h:form id="createPostingForm">
        <h:panelGrid rendered="#{jobBean.createOk && !jobBean.payOk}" >
            <h:messages globalOnly="true" />
            <h:outputLink value="/site/faces/recoveryPassword.jsp" rendered="#{jobBean.linkRPOk}" target="_blank">
                <h:outputText value="Recover Lost Password" />
            </h:outputLink>
        </h:panelGrid>
    <h4><h:outputText value="Price: #{sessionBean.ejbSession.currentSite.jobPrice} $ x categorie" rendered="#{sessionBean.ejbSession.currentSite.jobPrice>0 && (!jobBean.createOk || jobBean.payOk)}"/></h4>
    <h4><h:outputText value="#{jobBean.categoriesSize} Categorie selected, Total: #{jobBean.job.fee}" rendered="#{jobBean.payOk}"/></h4>
    <h:panelGrid columns="2" rendered="#{!jobBean.createOk}" >
    <rich:panel>
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid columns="3">
            <h:outputText value="(*) Title:"/>
            <h:inputText id="title" maxlength="100" value="#{jobBean.job.title}" size="70" required="true" requiredMessage="This is a required field"/>
            <h:message for="title" style="color: red" styleClass="errorMessage"/>
            
            <c:if test="${!empty sessionBean.areasCurrentSite}">
            <h:outputText value="Area:" />
            <a4j:region>
            <h:selectOneMenu id="area" value="#{jobBean.areaId}" >
                <c:forEach var="area" items="#{sessionBean.areasCurrentSite}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" reRender="locationPanel" ajaxSingle="true" />
            </h:selectOneMenu>
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            </a4j:region>
            <h:message for="area" />
            </c:if>
            
            <h:outputText value="Specific Location:"/>
            <h:panelGroup id="locationPanel">
            <h:inputText id="location" maxlength="70" value="#{jobBean.job.location}" size="50" rendered="#{empty jobBean.locationsJobArea}" />
            <h:selectOneMenu id="location1" value="#{jobBean.job.location}" rendered="#{!empty jobBean.locationsJobArea}" >
                <c:forEach var="location" items="#{jobBean.locationsJobArea}" >
                    <f:selectItem
                        itemValue="#{location.location}"
                        itemLabel="#{location.location}"/>
                </c:forEach>
            </h:selectOneMenu>
            </h:panelGroup>
            <a4j:commandButton id="refreshLocationPanel" style="display: none; visibility: hidden;" reRender="locationPanel" />
            
            <h:outputText value="Categorie:" rendered="#{sessionBean.ejbSession.currentSite.jobPrice==0}" />
            <h:selectOneMenu id="categorie" value="#{jobBean.jobCategorieId}" rendered="#{sessionBean.ejbSession.currentSite.jobPrice==0}" >
                <c:forEach var="categorie" items="#{adminBean.jobCategories}" >
                    <f:selectItem
                        itemValue="#{categorie.id}"
                        itemLabel="#{categorie.categorie}"/>
                </c:forEach>
            </h:selectOneMenu>
            <h:message for="categorie" rendered="#{sessionBean.ejbSession.currentSite.jobPrice==0}" />
            
            <c:if test="${sessionBean.ejbSession.owner!=null && sessionBean.ejbSession.currentSite.jobPrice>0}" >
            <h:outputText value="Purchase Order:"/>
            <h:inputText id="purchaseOrder" maxlength="50" value="#{jobBean.job.purchaseOrder}" />
            <h:message for="purchaseOrder" style="color: red" styleClass="errorMessage"/>
            </c:if>
            
            <h:outputText value="(*) Description:"/>
            <h:inputTextarea id="description" onkeydown="contar()" onkeyup="contar()" value="#{jobBean.job.description}" rows="7" cols="80" required="true" requiredMessage="This field is required" />
            <h:panelGroup><h:inputText id="contador" onkeydown="contar()" onkeyup="contar()" value="#{jobBean.contador}" size="5" /><h:message for="description" style="color: red" styleClass="errorMessage"/></h:panelGroup>
            
            <h:outputText value="(*) Compensation:"/>
            <h:inputText id="compensation" maxlength="70" value="#{jobBean.job.compensation}" size="50" required="true" requiredMessage="This field is required"/>
            <h:message for="compensation" style="color: red" styleClass="errorMessage"/>
        </h:panelGrid>
            
        <h:panelGrid id="inputEmail" columns="3">
            <h:outputText value="(*) Email Address:"/>
            <h:inputText id="email" maxlength="50" value="#{jobBean.job.email}" size="30" required="true" requiredMessage="This field is required" rendered="#{sessionBean.ejbSession.owner==null}"/>
            <h:inputText id="email1" value="#{sessionBean.ejbSession.owner.email}" size="30" readonly="true" rendered="#{sessionBean.ejbSession.owner!=null}"/>
            <h:message for="email" style="color: red" styleClass="errorMessage"/>
            
            <c:if test="${sessionBean.ejbSession.owner==null}">
            <h:outputText value="(*) Re-Type Email Address:"/>
            <h:inputText id="email2" maxlength="50" value="#{jobBean.email1}" size="30" required="true" requiredMessage="This field is required" />
            <h:message for="email2" style="color: red" styleClass="errorMessage"/>
            </c:if>
        </h:panelGrid>
            
        <h:panelGrid columns="2">
            <h:outputText value="Reply To:"/>
            <h:selectOneRadio id="typeReplayTo" value="#{jobBean.job.typeReplyTo}" layout="pageDirection">
                <f:selectItem 
                    itemValue="real email"
                    itemLabel="use this email address for replies."/>
                <f:selectItem
                    itemValue="masked email"
                    itemLabel="reply to: job-xxxxxxxxx@eez2find.com (eez2find.com anonymizes your real address and relays replies to it)."/>
                <f:selectItem 
                    itemValue="any email"
                    itemLabel=" DO NOT SHOW any email address (make sure to put a phone # or other contact info in your posting)."/>
            </h:selectOneRadio>
            
            <h:outputText value="Other Stuff:"/>
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{jobBean.job.telecommuting}" /><h:outputText value="OK for telecommuting"/>
                <h:selectBooleanCheckbox value="#{jobBean.job.partTime}" /><h:outputText value="part time"/>
                <h:selectBooleanCheckbox value="#{jobBean.job.contract}" /><h:outputText value="contract"/>
                <h:selectBooleanCheckbox value="#{jobBean.job.nonProfit}" /><h:outputText value="non profit organization"/>
                <h:selectBooleanCheckbox value="#{jobBean.job.intership}" /><h:outputText value="internship"/>
            </h:panelGroup>
            
            <h:outputText value="Permissions:"/>
            <h:panelGrid columns="2">
                <h:selectBooleanCheckbox value="#{jobBean.job.directContact}" /><h:outputText value="OK for direct contact by recruiters."/>
                <h:selectBooleanCheckbox value="#{jobBean.job.phoneCalls}" /><h:outputText value="OK to contact by phone ."/>
                <h:selectBooleanCheckbox value="#{jobBean.job.othersContact}" /><h:outputText value="OK to contact you for other kind of services (commercial, offers, services, etc)."/>
                <h:selectBooleanCheckbox value="#{jobBean.job.forPersonsDisabilities}" /><h:outputText value="OK for persons with disabilities to highlight this job opening."/>
            </h:panelGrid>
        </h:panelGrid>
        
        <h:panelGrid columns="3">
            <a4j:commandButton id="submit" type="submit" value="Create" action="#{jobBean.create}" reRender="createPostingForm, backForm" rendered="#{sessionBean.ejbSession.currentSite.jobPrice==0}" />
            <a4j:commandButton id="submitContinue" type="submit" value="Continue" action="#{jobBean.pay}" reRender="createPostingForm, backForm" rendered="#{sessionBean.ejbSession.currentSite.jobPrice>0}" />
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            <h:commandLink value="Preview" action="#{jobBean.previewCreate}" rendered="#{!jobBean.createOk}" />
        </h:panelGrid>
    </rich:panel>
    <rich:panel rendered="#{sessionBean.ejbSession.currentSite.jobPrice>0}">
        <h:message for="categories" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid columns="2">
            <h:outputText value="(*) Categorie/s:" />
            <h:selectManyCheckbox id="categories" value="#{jobBean.categories}" required="true" requiredMessage="Please choose one or more categories" layout="pageDirection" >
                <c:forEach var="categorie" items="#{adminBean.jobCategories}" >
                    <f:selectItem
                        itemValue="#{categorie.id}"
                        itemLabel="#{categorie.categorie}"/>
                </c:forEach>
            </h:selectManyCheckbox>
        </h:panelGrid>
    </rich:panel>
    </h:panelGrid>
    <rich:panel rendered="#{jobBean.payOk}">
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid>
            <h:outputText value="Aqui entra el formulario de pago con Pay Pal" />
            <a4j:commandButton id="submitPay" type="submit" value="Finish" action="#{jobBean.create}" reRender="createPostingForm, backForm" />
        </h:panelGrid>
    </rich:panel>
    </h:form>
    </a4j:region>
    <h:form id="backForm">
        <h:panelGrid columns="2" rendered="#{jobBean.createOk && !jobBean.payOk}" width="35%">
            <h:commandLink value="Back to Welcome Page" action="#{jobBean.backEdit}" />
            <h:commandLink value="Back to User Account Home" action="#{jobBean.homeUser}" rendered="#{sessionBean.ejbSession.owner!=null}"/>
        </h:panelGrid>
        <h:commandLink value="Back" action="#{jobBean.backCreate}" rendered="#{!jobBean.createOk}"/>
        <a4j:commandLink value="Back" reRender="createPostingForm, backForm" rendered="#{jobBean.payOk}" >
            <f:setPropertyActionListener target="#{jobBean.createOk}" value="#{false}"/>
            <f:setPropertyActionListener target="#{jobBean.payOk}" value="#{false}"/>
        </a4j:commandLink>
    </h:form>
    <a4j:include viewId="../login.jspx"/>
    <rich:separator height="1" />
</f:view>
<script>document.getElementById("createPostingForm:refreshLocationPanel").click();</script>